<template>
  <base-breadcrumb>
    <searchData :searchData="searchArr" @search="search" @getOption="getOption"></searchData>
    <a-card :bordered="false">
      <!-- <title-name title="分包安全员台账" /> -->
      
      <list-table
        ref="table"
        class="export-table"
        :columns="columns"
        :request="loadData"
        :isShowTotal="false"
        :pageKeys="['pageNum', 'pageSize', 'total']"
      >
        
        <template slot="prefix">
          <a-button @click="handleUpdate('add')" type="primary" v-btnPermission="'hse_045_add_01'">新增</a-button>
        </template>
        
        <span slot="sort" slot-scope="text, record, index">{{ index + 1 }}</span>
        
        <!-- 操作 -->
        <template slot="operation" slot-scope="text, record">
          <MoreButton>
          <a @click="handleUpdate('view', record)" v-btnPermission="'hse_045_loo_04'">查看</a>
            <a @click="handleUpdate('edit', record)" v-btnPermission="'hse_045_edi_02'">编辑</a>
            <a @click="handleUpdate('del', record)" v-btnPermission="'hse_045_del_03'">删除</a>
          </MoreButton>
        </template>
      </list-table>
    </a-card>
  </base-breadcrumb>
</template>

<script>
import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
import SelectProject from '@/components/Select/SelectProject' // 项目
import OrgTreeSelect from '@/components/OrgTreeSelect'
import SelectSubcontractor from '@/components/Select/SelectSubcontractor' // 分包商
import ASelectOrgPeople from '@/components/Select/ASelectOrgPeople'
import StatusDisplay from '@/components/StatusDisplay'
import { getSubcontractorList, delSubcontractor } from '@/api/safetySupervision/safetySubcontractor/safetySubcontractor.js'
import {
  STable
} from '@/components'
export default {
  name: 'a' + Date.now(),
  components: {
    STable,
    StatusDisplay,
  },
  data() {
    return {
      subContractorOrgId: null,
      childInitData: {},
      visible: {
        update: false,
      },
      columns: [
        {
          title: '序号',
          dataIndex: 'sort',
          width: 60,
          scopedSlots: { customRender: 'sort' }
        },
        {
          title: '分公司',
          width: 180,
          dataIndex: 'branchCompanyName',
        },
        {
          title: '项目名称',
          width: 180,
          dataIndex: 'projectName',
        },
        {
          title: '分包单位',
          width: 180,
          dataIndex: 'subcontractorName',
        },
        {
          title: '姓名',
          width: 100,
          dataIndex: 'name',
        },
        {
          title: '性别',
          width: 80,
          dataIndex: 'sex',
        },
        {
          title: '岗位资格证',
          width: 180,
          dataIndex: 'postCertificate',
        },
        {
          title: '从事本工作开始时间',
          width: 120,
          dataIndex: 'beginWorkTime',
        },
        {
          title: '调入项目时间',
          width: 120,
          dataIndex: 'beginProjectTime',
        },
        {
          title: '调出项目时间',
          width: 120,
          dataIndex: 'endProjectTime',
        },
        {
          title: ' 操作',
          dataIndex: 'operation',
          fixed: 'right',
          width: 180,
          scopedSlots: {
            customRender: 'operation'
          },
        },
      ],
      queryParam: {
      },
      loadData: async (parameter) => {
        const requestParameters = Object.assign({}, parameter, { param: this.queryParam })
        return getSubcontractorList(requestParameters).then((res) => {
          if (res.code == 200) {
            return { code: 200, ...res.data, data: res.data.list }
          }
          return { code: 200, data: [] }
        })
      },
    }
  },
  computed: {
    searchArr() {
      return [
        {
          name: '所属单位',
          valueKey: 'searchQuery',
          type: OrgTreeSelect,
        },
        // {
        //   name: '所属分公司',
        //   valueKey: 'branchCompanyId',
        //   type: SelectSubCompany
        // },
        // {
        //   name: '所属项目',
        //   keyValue: 'branchCompanyId',
        //   valueKey: 'projectId',
        //   type: SelectProject
        // },
        {
          name: '分包单位',
          keyValue: 'searchQuery._checked',
          valueKey: 'subcontractorId',
          type: SelectSubcontractor,
        },
        {
          name: '姓名',
          value: 'name',
          type: 'input',
        },
        {
          name: '性别',
          value: 'sexId',
          type: 'select',
          data: [
            { label: '男', value: 1 },
            { label: '女', value: 0 },
          ]
        },
      ]
    }
  },
  methods: {
    getOption(val) {
      console.log(val)
      if (val) {
        this.subContractorOrgId = val.subContractorOrgId
      }
    },
    //搜索
    search(val = {}) {
      this.queryParam = val;
      this.$refs.table.refresh()
    },
    handleUpdateConfirm() {
      this.visible.update = false
      this.$refs.table.refresh()
    },
    async delSubcontractor(data) {
      const [err, res] = await delSubcontractor(data.id)
      if (!err) {
        this.$message.success('成功')
        this.$refs.table.refresh()
      }
    },
    // 处理更新操作（新增、编辑）
    handleUpdate(type, data = {}) {
      if (type == 'del') {
        let that = this

        this.$confirm({
          title: '温馨提示',
          content: '确定是否删除数据？',
          okText: '确认',
          okType: 'danger',
          cancelText: '取消',
          onOk: () => {
            return delSubcontractor(data.id).then((res) => {
              if (res.code == 200) {
                that.$message.success(`删除成功！`)
                that.$refs.table.refresh()
              }
            })
          },
        })
      } else {
        this.$router.push({
          name:'subcontractorSafetyerEdit',
          query:{
            type,
            id: data.id
          },
        })
      }
    },
  },
}
</script>

<style lang="less" scoped>
  .page-header {
    .header-row {
      display: flex;

      .flex-content {
        flex: auto;
      }

      .divider {
        margin: 0 12px;
      }

      .expand-btn {
        margin-left: 8px;
        font-size: 14px;
      }
    }
  }

  .page-body {
    .table-operateors {
      .ant-btn+.ant-btn {
        margin-left: 12px;
      }
    }
  }
</style>
